<template>
  <div class="kanban-board" ref="todoList">
    <div
      v-for="element in todos"
      :key="element.groupName"
      class="sickness-page-type"
      :class="{
        'sickness-page-type-active': selectedGroupId === element.groupId,
      }"
    >
      <div
        style="display: flex; justify-content: space-between; width: 100%"
        @click="onTabFormworkType(element)"
      >
        <div style="display: flex">
          <img
            src="@/assets/manage/icon_tuodong_nor.svg"
            alt=""
            style="vertical-align: middle; cursor: grab"
            class="kanban-handle"
          />
          <span
            style="
              vertical-align: middle;
              display: block;
              width: 100px;
              overflow: hidden;
              white-space: nowrap;
            "
            :title="element.groupName"
          >
            {{ element.groupName }}
          </span>
        </div>
        <img
          src="@/assets/manage/icon_shezhi_nor.svg"
          alt=""
          style="vertical-align: middle; cursor: pointer"
          class="kanban-handle"
          @click="showContextMenu($event, element)"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDragAndDrop } from '@formkit/drag-and-drop/vue';
import { defineProps, ref, watch } from 'vue';
const emits = defineEmits(['onShowContextMenu', 'onTabFormworkType']);
const props = defineProps({
  todoItems: {
    type: Array,
    default: () => [],
  },
  doneItems: {
    type: Array,
    default: () => [],
  },
  group: {
    type: String,
    default: 'todoList',
  },
});

interface TodoElement {
  groupId: number | string;
  groupName: string;
  // add other fields if needed
}

// 先用空数组初始化拖拽实例，避免数据未到时初始化失败/多次绑定
// const [todoList, todos =] = useDragAndDrop<any>(props.todoItems, {
//   group: 'todoList',
//   dragHandle: '.kanban-handle',
// });
const todos = ref<any[]>([]);
const [doneList, dones] = useDragAndDrop([] as TodoElement[], {
  group: props.group,
  dragHandle: '.kanban-handle',
});

// 原位替换数组内容，保持同一引用，避免重复初始化
const replaceArray = (target: any, source: TodoElement[] = []) => {
  target.value.splice(0, target.value.length, ...source);
};
const selectedGroupId = ref<number | string | null>(null); // 目录添加选中状态
const onTabFormworkType = (element: any) => {
  // selectedGroupId.value = element.groupId;
  selectedGroupId.value = element.groupId;
  emits('onTabFormworkType', element);
};
watch(
  () => props.todoItems,
  (val: any) => {
    todos.value = props.todoItems;
    if (Array.isArray(val)) replaceArray(todos, val as TodoElement[]);
    if (val.length > 0) {
      onTabFormworkType(val[0]);
    }
  },
  { deep:true,  immediate: true }
);
// watchEffect(() => {
//   const current = props.todoItems
//   if (current.length > 0) {
//     todos.value = props.todoItems;
//     onTabFormworkType(props.todoItems[0])
//   }
//   // 不需要处理空数组情况
// })
// onMounted(() => {
//   console.log(123111111111);
  
//     todos.value = props.todoItems;
//     if (todos.value.length > 0) {
//       onTabFormworkType(todos.value[0]);
//     }
// });
watch(
  () => props.doneItems,
  (val: any) => {
    if (Array.isArray(val)) replaceArray(dones, val as TodoElement[]);
  },
  { immediate: true, deep: true }
);
const showContextMenu = (event: MouseEvent, element: TodoElement) => {
  emits('onShowContextMenu', event, element);
};

</script>
<style scoped lang="scss">
.sickness-page-type {
  width: 144px;
  height: 46px;
  cursor: pointer;
  line-height: 46px;
  text-align: left;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
  background: #f8f9fa;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid #e7e7e7;
  user-select: none;
  padding-left: 5px;
  &:hover {
    background: rgba(22, 173, 164, 0.05);
  }

  &-active {
    width: 144px;
    height: 46px;
    padding-left: 5px;
    background: rgba(22, 173, 164, 0.08);
    border-radius: 0px 0px 0px 0px;
    font-weight: 600;
    font-size: 14px;
    color: #16ada4;
  }
}
</style>
